<template>
    <div style="width:fit-content;margin:auto;" v-if="!forbidden">
        <div style="padding: 20px 0;display:flex">
            <el-scrollbar height="600">
                <div style="padding:0 10px" v-loading="userNoticeList == null" element-loading-text="正在获取我发布的公告">
                    <p style="text-align:center">我发布的公告</p>
                    <el-timeline>
                        <el-timeline-item center placement="top" v-for="notice in userNoticeList" :key="notice.noticeId"
                            :type="notice.noticeLevel == 'error' ? 'danger' : notice.noticeLevel" size="large"
                            :timestamp="notice.formattedDate">
                            <el-alert :style="{ boxShadow: 'var(--el-box-shadow-light)' }" :title="notice.noticeTitle"
                                :type="notice.noticeLevel" :description="notice.noticeContent" show-icon closable />
                        </el-timeline-item>
                    </el-timeline>
                    <el-empty description="暂时还没有任何公告" v-if="userNoticeList != null && userNoticeList.length == 0" />
                </div>
            </el-scrollbar>
            <div style="height:100%;margin:0 10px"></div>
            <el-scrollbar height="600">
                <p style="text-align:center">发布班级公告</p>
                <div style="padding:0 10px;width:600px">
                    <el-form label-position="top" label-width="100px" :model="noticeForm">
                        <el-form-item label="公告标题">
                            <el-input v-model="noticeForm.noticeTitle" />
                        </el-form-item>
                        <el-form-item label="公告内容">
                            <el-input v-model="noticeForm.noticeContent" name="description" type="textarea" />
                        </el-form-item>
                        <el-form-item label="公告等级">
                            <el-radio-group v-model="noticeForm.noticeLevel" class="ml-4">
                                <el-radio label="默认" size="large">普通</el-radio>
                                <el-radio label="成功" size="large">成功</el-radio>
                                <el-radio label="警告" size="large">警告</el-radio>
                                <el-radio label="错误" size="large">错误</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- <el-form-item v-if="this.$store.state.user.role != '学生' && this.$store.state.user.role != '老师'"
                            label="公告范围">
                            <el-radio-group v-model="noticeExtent" class="ml-4">
                                <el-radio label="学校" size="large">学校</el-radio>
                                <el-radio label="班级" size="large">班级</el-radio>
                            </el-radio-group>
                        </el-form-item> -->
                        <el-button type="primary" @click="postNotice">发布公告</el-button>
                    </el-form>
                </div>
            </el-scrollbar>
        </div>
    </div>
    <el-empty description="你没有权限发布公告" v-if="forbidden" />
</template>

<script>
import { dateFormat } from '@/assets/js/dateformat'
export default {
    data() {
        return {
            userNoticeList: null,
            // noticeExtent: '班级',
            forbidden:true,
            noticeForm: { noticeLevel: '默认', noticeGroupId: 0, noticeBelongId: 0, noticeUserId: 0 }
        }
    },
    created() {
        setTimeout(() => {
            this.getLastUserNotice(this.$store.state.user.userId)
        })
    },
    methods: {
        getLastUserNotice(userId) {
            this.$store.state.ajaxQueue.length++
            this.$request.get('/notice/notice_list?column=userId&value=' + userId).then(data => {
                this.$store.state.ajaxQueue.finished++
                this.userNoticeList = data.data.data
            })
        },
        postNotice() {
            // console.log(this.noticeForm);
            this.$store.state.ajaxQueue.length++
            this.$request.post('/notice/notice_post', this.noticeForm).then(data => {
                this.$store.state.ajaxQueue.finished++
                this.$ElMessage({
                    message: data.success ? '发布成功' : '发布失败',
                    type: data.success ? 'success' : 'error',
                })
                if (data.success)
                    this.getLastUserNotice(this.$store.state.user.userId)
            })
        }
    },
    watch: {
        userNoticeList() {
            if (this.userNoticeList == null || this.userNoticeList == []) return
            this.userNoticeList.forEach(notice => {
                switch (notice.noticeLevel) {
                    case '警告': notice.noticeLevel = 'warning'
                        break
                    case '错误': notice.noticeLevel = 'error'
                        break
                    case '成功': notice.noticeLevel = 'success'
                        break
                    default: notice.noticeLevel = 'info'
                }
                let date = new Date(notice.noticeDate)
                notice.formattedDate = dateFormat(date, 'yyyy-MM-dd hh:mm:ss')
            })
            this.userNoticeList.sort((notice1, notice2) => notice2.noticeDate - notice1.noticeDate)
        },
        '$store.state.user'() {
            if(this.$store.state.user.userId<=0){
                this.forbidden=true
                return
            }      
            this.noticeForm.noticeUserId = this.$store.state.user.userId
            if (this.$store.state.user.role == '学生' || this.$store.state.user.role == '老师') {
                if(this.$store.state.user.groupId>0){
                    this.noticeForm.noticeGroupId = this.$store.state.user.groupId
                    this.noticeForm.noticeBelongId = -1
                }
            } else if (this.$store.state.user.role == '分站管理员') {
                this.noticeForm.noticeBelongId = this.$store.state.user.collegeId
                this.noticeForm.noticeGroupId = -1
            } else {
                this.noticeForm.noticeBelongId = 0
                this.noticeForm.noticeGroupId = -1
            }
            this.forbidden=false
        },
    }
}
</script>

<style scoped>

</style>